<template>
  <div>
    <div :class="className">
      <div v-for="(item, index) in list" :key="item" @click="handleClick(item, index)">
        <van-icon :class="['tendency-img', values[index]?.isActived && 'actived']" :name="item" />
        <div class="g-tc g-m-t-10">{{values[index]?.count || 0}}</div>
      </div>
    </div>
    <Share ref="share"/>
    <Comment ref="comment" />
  </div>
</template>

<script>
import { ref } from 'vue'
import Share from './share'
import Comment from './comment'

export default {
  name: 'UserTendency',
  components: {
    Share,
    Comment
  },
  props: {
    values: {
      type: Array,
      default: function () {
        return []
      }
    },
    className: {
      type: String,
      default: 'g-flex g-jc-sa'
    }
  },
  emits: ['success'],
  setup(props, ctx) {
    const list = ['like', 'star', 'chat', 'share']
    const share = ref(null)
    const comment = ref(null)

    const handleClick = (name, index) => {
      switch (name) {
        case 'like':
        case 'star':
          ctx.emit('success', {
            name,
            index
          })
          break
        case 'chat':
          comment.value.open()
          break
        case 'share':
          console.log(share.value)
          share.value.open()
          break
      }
    }

    return {
      list,
      share,
      comment,
      handleClick
    }
  }
}
</script>

<style lang="scss" scoped>
.g-flex {
  display: flex;
}
.g-f-d-r {
  direction: row;
}
.g-f-d-c {
  direction: column;
}
.g-jc-sa {
  justify-content: space-around;
}
.g-tc {
  text-align: center;
}
.g-m-t-10 {
  margin-top: 10px;
}
.tendency-img {
  font-size: 30px;
}
.actived {
  color: pink;
}
</style>